import React, { Component } from 'react';
import { observer } from 'mobx-react';
import { Tools, Flex, Picker, Icon } from "weaver-mobile";
import find from 'lodash/find';
const {Item} = Flex;
const getLabel = Tools.getLabel;

@observer
export default class VirtualOrg extends Component{
    render(){
        const {store} = this.props;
        const {toJS, companyId, virtualDatas, onVirtualChangeHandle} = store;
        const companyValue = find(toJS(virtualDatas), {value: companyId});
        return (
            <Flex className='virtualOrg'>
                <Item>
                <Picker
                    title={getLabel(390061, '选择维度')}
                    data={toJS(virtualDatas)}
                    cols={1}
                    value={[companyId]}
                    onOk={v => onVirtualChangeHandle(v[0])}>
                        <div className='orgName'>
                            {companyValue && companyValue.label}
                            <div className='icon'>
                                <Icon type="jiantou-down" color="#868686" size="xxs" />
                            </div>
                        </div>
                    </Picker>
                </Item>
            </Flex>
        )
    }
}